<template>
	<view>
		<view class="order-list">
			<navigator v-for="(item, index) in orderList" :key="index" hover-class="none"
				class="order-item bg-white mt20"
				:url="`/pages/order_details/order_details?id=${item.id}&order_type=${orderType}`">
				<view class="order-no row-between">
					<view>订单编号：{{item.orderNo}}</view>
					<text :class="'order-icon order-icon-'+orderType"></text>
				</view>
				<view class="order-con">
					<order-goods :list="item.mealList" :order-type="orderType"></order-goods>
					<view class="mt20 mb20 ml30" style="color: #b7b7b7;">查看更多</view>
				</view>
				<view class="order-footer">
					<view>支付金额：{{item.amount}}元</view>
					<view class=" row-between">
						<view class="line1">
							配送地点：{{`${item.address.mansionName || ''}${item.address.floor ? item.address.floor+'楼': ''}${item.address.houseNumber || ''}${item.address.companyName || ""}`}}
						</view>
						<u-button class="btn-wrap" v-if="orderType === '1'" size="mini" type="warning" shape="circle"
							plain="true" :data-id="item.id" @click="showSurePop(item.id)">退款</u-button>
						<view style="color: #FFCC46" v-if="item.status === 6">退款中</view>	
					</view>
				</view>
			</navigator>
			<loading-footer :status="status" :slot-empty="true" @refresh="reload">
				<view slot="empty" class="column-center" style="padding-top: 200rpx">
					<image class="img-null" src="/static/images/goods_null.png"></image>
					<text class="lighter">暂无订单</text>
				</view>
			</loading-footer>
			<u-modal v-model="deleteSure" :showCancelButton="true" confirm-text="退款" confirm-color="#ff8f00"
				:show-title="false" @confirm="orderApplyRefundFun" @cancel="hidePop">
				<view class="column-center tips-dialog">
					<image class="icon-lg" src="/static/images/icon_warning.png"></image>
					<view style="margin-top:30rpx">确认退款吗？</view>
				</view>
			</u-modal>
		</view>
		<!-- <order-dialog ref="orderDialog" :order-id="orderId" :type="type" @refresh="reflesh"></order-dialog> -->
		<loading-view v-if="showLoading" background-color="transparent" :size="50"></loading-view>
	</view>
</template>


<script>
	import {
		getOrderList,
		cancelOrder,
		delOrder,
		confirmOrder,
		orderApplyRefund
	} from '@/api/order';
	import {
		prepay
	} from '@/api/app';
	import {
		loadingType
	} from '@/utils/type';

	import {
		wxpay,
		alipay
	} from '@/utils/pay';
	import {
		loadingFun
	} from '@/utils/tools'
	export default {
		data() {
			return {
				page: 1,
				orderList: [],
				status: loadingType.LOADING,
				showCancel: false,
				type: 0,
				orderId: "",
				showLoading: false,
				currentId: -1,
				deleteSure: false
			};
		},

		components: {

		},
		props: {
			orderType: {
				type: String
			}
		},
		created: function() {
			uni.$on("refreshorder", () => {
				this.reflesh()
			})
		},
		beforeMount: function() {
			this.getOrderListFun();
		},
		destroyed: function() {
			uni.$off("refreshorder")
		},
		methods: {
			showSurePop: function(id) {
				this.deleteSure = true;
				this.currentId = id;
			},
			hidePop: function(e) {
				this.deleteSure = false;
			},
			async orderApplyRefundFun(e) {
				let id = this.currentId;
				const res = await orderApplyRefund(id)
				this.$toast({
					title: res.msg
				})
				if (res.code === 200) {
					this.reflesh()
				}
			},
			reflesh() {
				this.page = 1
				this.orderList = []
				this.status = loadingType.LOADING
				this.type = 0
				this.getOrderListFun();
			},

			reload() {
				this.status = loadingType.LOADING
				this.getOrderListFun();
			},


			orderDialog() {
				this.$refs.orderDialog.open()
			},

			delOrder(id) {
				this.orderId = id
				this.type = 1
				this.$nextTick(() => {
					this.orderDialog();
				});
			},

			comfirmOrder(id) {
				this.orderId = id
				this.type = 2
				this.$nextTick(() => {
					this.orderDialog();
				});
			},

			cancelOrder(id) {
				this.orderId = id
				this.type = 0
				this.$nextTick(() => {
					this.orderDialog();
				});
			},

			payNow(id) {
				this.showLoading = true
				prepay({
					from: 'order',
					order_id: id
				}).then(res => {
					let args = res.data;
					this.showLoading = false
					if (res.code == 1) {
						wxpay(args).then((resPay) => {
							if (resPay == 'success') {
								this.$toast({
									title: "支付成功"
								})
								uni.$emit("refreshorder")
							}
						})
					} else if (res.code == 20001) {
						alipay(args).then((resPay) => {
							if (resPay == 'success') {
								this.$toast({
									title: "支付成功"
								})
								uni.$emit("refreshorder")
							}
						})
					}
				});
			},

			async getOrderListFun() {
				let {
					page,
					orderType,
					orderList,
					status
				} = this;
				const data = await loadingFun(getOrderList, page, orderList, status, {
					status: orderType,
					pageNo: page,
				})
				if (!data) return
				this.page = data.page
				this.orderList = data.dataList.map((list) => {
					list.mealList = list.mealList.splice(0, 2)
					return list
				})
				this.status = data.status
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			}

		},
		computed: {
			getOrderStatus() {
				return (status) => {
					let text = ''
					switch (status) {
						case 0:
							text = '出餐中1111';
							break;
						case 1:
							text = '配送中';
							break;
						case 2:
							text = '已送达';
							break;
						case 3:
							text = '已完成';
							break;
						case 4:
							text = '已退款';
							break;
					}
					return text
				}
			},
			getCancelTime() {
				return (time) => time - Date.now() / 1000
			}
		}
	};
</script>
<style lang="scss">
	.order-list {
		min-height: calc(100vh - 80rpx);
		padding: 0 24rpx;
		overflow: hidden;

		.tips-dialog {
			height: 230rpx;
			width: 100%;
		}

		.order-item {
			background-color: #F7F7F7;
			border-radius: 20rpx;
			overflow: hidden;

			.order-no {
				padding: 10rpx 20rpx;

				.order-icon {
					display: inline-block;
					width: 38rpx;
					height: 38rpx;

					&-1 {
						background: url('/static/images/icon_my_payment.png') no-repeat center/contain;
					}

					&-2 {
						background: url('/static/images/icon_my_fahuo.png') no-repeat center/contain;
					}

					&-3 {
						background: url('/static/images/icon_my_shouhuo.png') no-repeat center/contain;
					}
				}
			}

			.all-price {
				text-align: right;
				padding: 0 24rpx 20rpx;
			}

			.order-footer {
				// height: 100rpx;
				// border-top: $-solid-border;
				padding: 24rpx;
				background-color: #F0F0F0;

				.btn-wrap {
					>button {
						padding: 0 40rpx;
					}
				}
			}
		}
	}
</style>
